<template>
    <div>
        <el-card v-if="projects.length === 0">
            <div slot="header">您没有参与任何项目</div>
            <div>
                请联系我们：xxxxx
            </div>
        </el-card>
        <el-card v-loading="loading.projects">
            <div slot="header">制定方案</div>

            <el-form :model="form" label-width="100px" v-loading="loading.projects">
                <el-form-item label="可选项目" prop="mode">
                    <el-radio-group v-model="form.project_id">
                        <el-radio-button v-for="p in projects" :key="p.id" :label="p.id">
                            {{p.name}}
                        </el-radio-button>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <el-form :model="form" label-width="100px" v-if="form.project_id > 0" v-loading="loading.project">
                <el-form-item label="主播要求" prop="mode">
                    <el-radio-group v-model="form.mode">
                        <el-radio :label="0">线上</el-radio>
                        <el-radio :label="1">线下</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="主播性别" prop="gender">
                    <el-radio-group v-model="form.gender">
                        <el-radio :label="-1">不限</el-radio>
                        <el-radio :label="1">男</el-radio>
                        <el-radio :label="0">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="人气量级" prop="watch">
                    <el-checkbox-group v-model="form.watch">
                        <el-checkbox :label="-1">不限</el-checkbox>
                        <el-checkbox :label="0">万+</el-checkbox>
                        <el-checkbox :label="1">十万+</el-checkbox>
                        <el-checkbox :label="2">百万+</el-checkbox>
                        <el-checkbox :label="3">千万+</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="平台" prop="platforms">
                    <el-checkbox-group v-model="form.platforms">
                        <el-checkbox :label="-1">不限</el-checkbox>
                        <el-checkbox v-for="(p,index) in platforms" :key="index" :label="p">{{p}}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="直播分类" prop="categories">
                    <el-checkbox-group v-model="form.categories">
                        <el-checkbox :label="-1">不限</el-checkbox>
                        <el-checkbox v-for="(c,index) in categories" :key="index" :label="c">
                            {{c}}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="主播数量" prop="anchor_amount">
                    <el-input-number v-model="form.anchor_amount"/>
                </el-form-item>
                <el-form-item label="预算" prop="budget">
                    <el-input-number v-model="form.budget" :controls="false"/>
                    元人民币
                </el-form-item>
            </el-form>
            <el-table :data="filter_anchors" empty-text="没有符合条件的主播" v-if="form.project_id > 0"
                      v-loading="loading.project" border>
                <el-table-column label="平台" prop="platform.name" width="80px"/>
                <el-table-column label="主播名称" prop="name" width="120px"/>
                <el-table-column label="性别" width="80px">
                    <template slot-scope="scope">
                        {{scope.row.gender ? '男':'女'}}
                    </template>
                </el-table-column>
                <el-table-column label="直播网址" width="80px">
                    <template slot-scope="scope">
                        <a target="_blank" :href="scope.row.url">链接</a>
                    </template>
                </el-table-column>
                <el-table-column label="主播人气" prop="fans" width="120px" sortable/>
                <el-table-column label="参考价格" width="100px"/>
                <el-table-column label="分类">
                    <template slot-scope="scope">
                        <el-tag v-for="(item,index) in scope.row.option.categories" :key="index">
                            {{item}}
                        </el-tag>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                loading: {projects: true, project: false},
                projects: [],
                project: null,
                platforms: [],
                categories: [],
                anchors: [],
                form: {
                    project_id: 0,
                    mode: 0,
                    gender: -1,
                    platforms: [-1],
                    watch: [-1],
                    categories: [-1],
                    anchor_amount: 1,
                    budget: 0
                }
            };
        },
        methods: {
            getProjects() {
                this.loading.projects = true;
                this.$http.get('/api/proposal/projects').then(({data}) => {
                    this.projects = data;
                    this.loading.projects = false;
                });
            },
            getProject(id) {
                this.loading.project = true;
                this.$http.get('/api/proposal/project/' + id).then(({data}) => {
                    this.loading.project = false;
                    this.platforms = data.platforms;
                    this.anchors = data.anchors;
                    this.categories = data.categories;
                });
            },
            submit() {
            },
        },
        watch: {
            'form.project_id'(id) {
                this.getProject(id);
            },
        },
        computed: {
            filter_anchors() {
                let count = 0;
                return this.anchors.filter(anchor => {
                    let filter = true;

                    if (count >= this.form.anchor_amount)
                        return false;

                    if (this.form.gender !== -1) {
                        filter = filter && (anchor.gender === !!this.form.gender);
                    }
                    if (this.form.watch.indexOf(-1) === -1) {
                        let _filter = false;
                        this.form.watch.some(watch => {
                            switch (watch) {
                                case 0:
                                    _filter = anchor.fans >= 10000;
                                    break;
                                case 1:
                                    _filter = anchor.fans >= 100000;
                                    break;
                                case 2:
                                    _filter = anchor.fans >= 1000000;
                                    break;
                                case 3:
                                    _filter = anchor.fans >= 10000000;
                                    break;
                            }
                            if (_filter)
                                return true;
                        });
                        filter = filter && _filter;
                    }
                    if (this.form.platforms.indexOf(-1) === -1) {
                        filter = filter && (this.form.platforms.indexOf(anchor.platform.name) >= 0);
                    }
                    if (this.form.categories.indexOf(-1) === -1) {
                        let _filter = false;
                        anchor.option.categories.some(name => {
                            if (this.form.categories.indexOf(name) >= 0) {
                                _filter = true;
                                return true;
                            }
                        });
                        filter = filter && _filter;
                    }
                    if (filter)
                        count++;
                    return filter;
                });
            },
        },
        mounted() {
            this.getProjects();
        },
    }
</script>

<style scoped>

</style>